<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主播数据管理平台</title>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element-ui.css">
    <!-- 先引入 Vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>    
    <!-- 引入 http-vue-loader -->
    <script src="./js/httpVueLoader.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element-ui-lib.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            width: 100%;
            height: 100vh;
            background: #a0cfff;
        }
        .logo{
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            background: #fff;
            box-shadow:0 0 10px #ddd;
            width: 100px;
            height: 100px;
            padding: 10px;
        }
        .logo img{
            width: 100%;
            height: 100%;
            border-radius:50%;
        }
        .login_form{
          border-radius: 16px;
          background: #fff;
          width: 400px;
          height: 400px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform:translate(-50%,-50%);
        }
        .form_input{
          width: 100%;
          position: absolute;
          bottom: 0;
          padding: 20px;
          box-sizing: border-box;
        }
        .btns{
          width: 100%;
          display: flex;
          justify-content: flex-end;
        }
      </style>
</head>
<body>
    <div id="app">
        <div class="login_form">
            <div class="logo">
                <img src="../../static/img/logo.png" alt="">
            </div>    
            <el-form ref="loginFormRef" :model="loginForm" label-width="0px" :rules="rules" class="form_input">
                <el-form-item prop="username">
                  <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input placeholder="请输入密码" v-model="loginForm.password" type="password" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入手机号"></el-input>
                  </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入验证码" v-model="loginForm.password" type="password" ></el-input>
                </el-form-item>
                <div class="btns">
                  <el-button type="primary" @click="RegisterSuccess">注册</el-button>
                </div>
              </el-form>
        </div>
    </div>
</body>

<script>
    // 使用httpVueLoader
    Vue.use(httpVueLoader);

    new Vue({
        el: '#app',
        data () {
            return { 
                visible: false,
                loginForm:{
                    username:'',
                    password:''
                },
                rules:{
                    username:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 4 到 16 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 8 到 16 个字符', trigger: 'blur' }
                    ]
                }        
            }
        },
        methods:{
            login(){
                this.$refs.loginFormRef.validate( async (valid)=>{
                    if(!valid) return
                })
            },
            register () {
                window.location.href = "./Login.html"
            }
        }
    })
</script>
</html>